<template>
  <view class="search-container">
    <!-- 顶部输入框 -->
    <view class="">
      <uni-search-bar @confirm="handlerConfirm" @clear="handlerClear" :model-value="queryObj.keyword" focus
        placeholder="请输入搜索关键字" @cancel="handlerCancel"></uni-search-bar>
    </view>
    <!-- 最近搜索，热门搜索 -->
    <view class="content-box">
      <my-search title="最近搜索" :keywords="keywords" v-if="keywords.length>0">
        <uni-icons type="trash" size="25" @click="handlerDelete"></uni-icons>
      </my-search>
      <my-search title='热门搜索' :keywords="hots" v-if="hots.length>0"></my-search>
    </view>
    <view class="empty" v-show="isEmpty">
      <uv-empty mode="search" text="搜索结果为空"></uv-empty>
    </view>
    <view class="paper-list-box">
      <navigator url="/subpkg/preview_img/preview_img" v-for="p in searchResList" :key="p._id" class="paper-item">
        <image class="paper" :src="p.smallPicurl" mode="aspectFill"></image>
      </navigator>
    </view>
    <view class="load-more-box">
      <uni-load-more v-show="searchResList.length!==0" :status="status" @clickLoadMore="handlerLoadMore"
        :content-text="content"></uni-load-more>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
  } from 'vue';
  import http from '@/api/index.js';
  import {
    onShow
  } from '@dcloudio/uni-app';
  import {
    showMsg
  } from '../../utlis/interact';
  // 数据
  // 1. 全局变量
  let total = 0; //总页数
  const content = {
    contentdown: "点击显示更多"
  }
  // 2. 响应式数据
  const queryObj = reactive({ // 搜索关键字
    keyword: '',
    pageNum: 1,
    pageSize: 12
  });
  const isEmpty = ref(false); //是否有搜索结果
  const status = ref('more'); //uni-load-more状态
  const searchResList = ref([]); // 存放搜索结果的数组
  const isLoading = ref(false); //是否加载中
  const keywords = ref(JSON.parse(uni.getStorageSync('kws') || '[]')); //存放搜索词的数组
  const hots = ref(['萌宠', '卡通', '建筑', '帅哥']); // 存放热门搜索的数组

  // 事件回调
  // 1. 点击了回车
  function handlerConfirm(e) {
    const {
      value: kw
    } = e
    queryObj.keyword = kw.trim();
    initParams();
    getSearchResult();
  }
  //2. 点击删除历史icon
  function handlerDelete() {
    uni.showModal({
      title: '提示',
      content: '您确认要清空历史记录吗？',
      success(res) {
        res.confirm && uni.removeStorageSync('kws');
        keywords.value = [];
      }
    })
  }
  // 3. 加载更多
  function handlerLoadMore(e) {
    const {
      detail: {
        status: sta
      }
    } = e;
    if (sta === 'more') {
      // 加载更多
      /* 
        判断是否加载完毕
        判断是否正在发起请求
        页码加一
        上述情况都没有发起请求
      */
      // 1. 判断是否加载完毕
      if (queryObj.pageNum * queryObj.pageSize >= total) {
        status.value = 'noMore';
        return;
      }
      // 2. 判断是否正在发起请求
      if (isLoading.value) return showMsg('网络繁忙，请稍后重试');

      // 3. 页码加一
      queryObj.pageNum++;

      // 上述情况都没有发起请求
      getSearchResult();
    }
  }
  // 4. 点击了取消
  function handlerCancel(e) {
    uni.navigateBack();
  }
  // 5. 点击了叉
  function handlerClear() {
    searchResList.value = [];
    if (searchResList.value.length === 0) isEmpty.value = false;
  }
  // 网络请求
  // 获取搜索结果列表
  async function getSearchResult() {
    // 注意：先判断搜索关键词queryObj.keyword是否为空，
    // 如果为空，清空存放搜索结果的数组，否则发起ajax请求
    if (queryObj.keyword === '') {
      searchResList.value = [];
      return;
    }
    isLoading.value = true;
    const res = await http('api/bizhi/searchWall', queryObj);
    isLoading.value = false;
    if (res.errCode !== 0) return showMsg();
    searchResList.value = [...searchResList.value, ...res.data];
    if (searchResList.value.length === 0) isEmpty.value = true; //没有搜索结果，展示uv-empty
    total = res.total;
    // 成功返回数据后将搜索关键词存到数组
    saveSeaHisListToLocal();
  }

  // 其它函数
  // 将搜索词持久化保存在本地
  function saveSeaHisListToLocal() {
    // 对搜索词的处理，去重和限制个数
    keywords.value = Array.from(new Set([queryObj.keyword, ...keywords.value])).slice(0, 4)

    // 将搜索历史记录保存在本地
    uni.setStorageSync('kws', JSON.stringify(keywords.value));
  }
  // 再次发请求时初始化数据
  function initParams() {
    searchResList.value = [];
    total = 0;
    status.value = 'more';
    queryObj.pageNum = 1;
    isEmpty.value = false;
  }

  // 宏函数
  //对外暴露属性和方法
  defineExpose({
    handlerConfirm
  })
</script>

<style lang="scss" scoped>
  .search-container {

    .content-box {
      padding: 0 10px;
    }

    .load-more-box {
      padding-bottom: env(safe-area-inset-bottom);
      text-align: center;
    }

  }
</style>